<?php $this->placeholder('onReady')->captureStart() ?>
	$("#<?php echo $this->id_tablesorter?>").tablesorter(); 
    
    $('div.title').cluetip({splitTitle: '|',width:300});
    
<?php $this->placeholder('onReady')->captureEnd() ?>

<?php $columns=$this->partialLoop($this->controllerName.'/fila2.phtml',(array)$this->rack['activos']); ?>	
  

<?php

$style = <<<STYLE

STYLE;

$this->headScript()->offsetSetFile(10,'https://www.google.com/jsapi','text/javascript');



$script = <<<SCRIPT
      google.load("visualization", "1", {packages:["corechart","table","controls"]});
      
      google.setOnLoadCallback(barpotencia);
      google.setOnLoadCallback(us);
      

     // google.setOnLoadCallback(drawTable);



    function drawTable() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Tipo Activo');
        data.addColumn('number', 'Numero de U');
        data.addColumn('number', 'Potencia Maxima');
        data.addColumn('string', 'Destino / Uso');
        data.addColumn('string', 'Marca');
        data.addColumn('string', 'Modelo');
        data.addColumn('string', 'Departamento');
        data.addColumn('string', 'Notas');
        data.addColumn('string', 'boton');
        
        
        data.addRows([
          $columns
        ]);


        var options = {
            showRowNumber: false,
            allowHtml:true,
        };



        var stringFilter1 = new google.visualization.ControlWrapper({
            'controlType': 'StringFilter',
            'containerId': 'control1',
            'options': {
              'filterColumnLabel': 'Tipo Activo',
            }
        });
        var stringFilter2 = new google.visualization.ControlWrapper({
            'controlType': 'StringFilter',
            'containerId': 'control2',
            'options': {
              'filterColumnLabel': 'Marca'
            }
        });


        var table = new google.visualization.ChartWrapper({
          'chartType': 'Table',
          'containerId': 'table_div',
          'options' : {
            showRowNumber: false,
            allowHtml:true,
          }
        });

        
        table.draw(data, options);
        
        
          // Create the dashboard.
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
          // Configure the string filter to affect the table contents
          bind(stringFilter1, table).
          bind(stringFilter2, table).
          // Draw the dashboardm
          draw(data);

        
     
      }
      


    function barpotencia() {
        var data = google.visualization.arrayToDataTable([
          ['', 'Capacidad', 'Ocupación'],
          ['',  {$this->rack['capacidad_potencia']},{$this->rack['potencia_ocupada']}],
        ]);

        var options = {
          title: 'Potencia Watios',
          'width':500,
          'height':300,
          legend: {position: 'right'},
          colors:['green','blue'],
          backgroundColor:'#FAFAFA'

        };

        var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
        
       
        
        chart.draw(data, options);
      }
      
      
      function us() {
        
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Nº U ocupadas ');
        data.addColumn('number', 'Ocupada ');
        data.addColumn('number', 'Libre ');
        data.addRows(1);

        data.setValue(0, 0, '');
        data.setValue(0, 1, {$this->rack['u_ocupadas']});
        data.setValue(0, 2, {$this->rack['u_libre']});

       var options = {
          title: 'Ocupacion U`s',
          'width':500,
          'height':300,
          'isStacked': true,
          legend: {position: 'right'},
          colors:['blue','green'],
          backgroundColor:'#FAFAFA',
          
          vAxis: {maxValue : {$this->rack['capacidad_u']} , gridlines: { count: 10}}


        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
        chart.draw(data, options);
      }    
      
      
      
      
    

SCRIPT;

if($style)$this->headStyle()->appendStyle($style);
if($script)$this->headScript()->offsetSetScript(11,$script,'text/javascript');

?>




<?=$this->msg($this->translate('Rack').' : '.$this->rack['matricula'],'head',null,false); ?>



<div class="contenedor_tablesorter">

<table width="100%" class="tabla_descriptiva_proyecto">
<tbody>
<tr>
	<th class="ui-state-hover" width="25%"><?php echo $this->translate('Proyecto');?></th><td width="25%" class="ui-state-highlight"><?=$this->escape($this->rack['proyecto']);?>&nbsp;</td>
    <th class="ui-state-hover"><?php echo $this->translate('Sala');?></th><td class="ui-state-highlight"><?=$this->rack['sala']?>&nbsp;</td>
</tr>
<tr>
	<th class="ui-state-hover" width="25%"><?php echo $this->translate('Matricula');?></th><td width="25%" class="ui-state-highlight"><?=$this->escape($this->rack['matricula']);?>&nbsp;</td>
    <th class="ui-state-hover"><?php echo $this->translate('Dimensiones');?></th><td class="ui-state-highlight"><?=$this->rack['dimensiones']?>&nbsp;</td>
</tr>	

<tr>
	<th class="ui-state-hover" width="25%"><?php echo $this->translate('Denominacion');?></th><td width="25%" class="ui-state-highlight"><?=$this->escape($this->rack['denominacion']);?>&nbsp;</td>
	<th class="ui-state-hover"><?php echo $this->translate('Capacidad Total en U`s');?></th><td class="ui-state-highlight"><?=$this->numES($this->rack['capacidad_u'],0);?>&nbsp;</td>

</tr>	
<tr>
    <th class="ui-state-hover"><?php echo $this->translate('Marca');?></th><td class="ui-state-highlight"><?=$this->escape($this->rack['marca']); ?>&nbsp;</td>
  	<th class="ui-state-hover"><?php echo $this->translate('Capacidad Total en W');?></th><td class="ui-state-highlight"><?=$this->numES($this->rack['capacidad_potencia'],0);?>&nbsp;</td>
</tr>	

<tr>
 	<th class="ui-state-hover"><?php echo $this->translate('Modelo');?></th><td class="ui-state-highlight"><?=$this->escape($this->rack['modelo']);?>&nbsp;</td>
  	<th class="ui-state-hover"><?php echo $this->translate('Ocuapacion U`s');?></th><td class="ui-state-highlight"><?=$this->numES($this->rack['u_ocupadas'],0);?>&nbsp;</td>

</tr>
<tr>
	<th class="ui-state-hover"><?php echo $this->translate('Departamento');?></th><td class="ui-state-highlight"><?=$this->escape($this->rack['departamento']);?>&nbsp;</td>
  	<th class="ui-state-hover"><?php echo $this->translate('Ocupacion W');?></th><td class="ui-state-highlight"><?=$this->numES($this->rack['potencia_ocupada'],0);?>&nbsp;</td>
</tr>
<tr>
    <th class="ui-state-hover"><?php echo $this->translate('Observaciones');?></th><td class="ui-state-highlight" colspan="3"><?=$this->text($this->rack['notas']); ?>&nbsp;</td>
</tr>

</tbody>	

<tr>
  <td colspan="2" valign="top"><div id="chart_div2"></div></td>
    <td colspan="2" valign="top"><div id="chart_div"></div></td>
</tr>	
</table>


<?=$this->msg('Activos')?>
<?php echo $this->insertarFila($this->controllerName,$this->idZona,'id_rack/'.$this->rack['id']);?>



<table id="<?= $this->id_tablesorter?>" width="100%" class=""> 
    <caption>
       <div id="total_table_filter" style="float: right;">Total <span class="filtradas"><?=count($this->rack['activos'])?></span></div>    
    </caption>
    <thead>
		<tr>
			<th><?php echo $this->translate('Tipo Activo');?></th> 
    		<th><?php echo $this->translate('Número de U`s ocupadas');?></th> 
            <th><?php echo $this->translate('Potencia máxima W');?></th> 
    		<th><?php echo $this->translate('Destino / Uso');?></th> 
            
    		<th><?php echo $this->translate('Marca');?></th> 
            <th><?php echo $this->translate('Modelo');?></th>
            <th><?php echo $this->translate('Departamento');?></th> 
            <th><?php echo $this->translate('Notas');?></th>
            <th></th>
    	</tr>
    </thead>
    <tbody>
        <?php echo $this->partialLoop($this->controllerName.'/fila.phtml',(array)$this->rack['activos']); ?>	
    </tbody>
</table>

</div>



<div id="dashboard">
    <div id="control1"></div>
    <div id="control2"></div>
    <div id="control3"></div>
    <div id="table_div"></div>
</div>
